<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>喜迎元旦·抽奖工具</title>
    <style>
 
        .box{
            width:600px;
            color: white;
            
            
            position:absolute;
            margin-top: 250px;
            left: 50%;
            text-align: center;
            padding:20px;
            /*margin-left:-200px;
            margin-top:-150px;*/
            -webkit-transform:translate(-50%, -50%);
            -moz-transform:translate(-50%, -50%);
            -ms-transform:translate(-50%, -50%);
            -o-transform:translate(-50%, -50%);
            transform:translate(-50%, -50%);
            
        }
 
        .content{
            
            padding:20px;
            font-size:60px;
        }
        .box button{
            font-family: "Microsoft YaHei";
            font-size:30px;
            margin-top:10px;
            width:100%;
            
            cursor:pointer;
            line-height: 40px;
            outline:none;
        }
 
        .custom{
            padding:20px;
            border:1px solid green;
            border-radius: 5px;
            margin-top:10px;
            text-align:center;
        }
    </style>
</head>
<body background="A1.jpg" style="background-size: 100%;background-repeat: no-repeat;">
    <div class="box">
        <div class="content" id="content"><h1 style="font-size: 50px">随机抽奖系统</h1></div>
        <button onclick="gotoRand()" id="btn">开 始</button>
 
        <div id="custom" hidden>
            
        </div>
    </div>
 
    <script>
 
        //声明 所有的人名 组成的数组
        var nameList = ["刘闵浩", "刘博宇", "蒋浩铭", "付振庭", "戴君帆", "秦宇杉","陈璿如" ,"杨心杨", "谈镇豪", "何思源", "曾子云", "周子琪", "唐菡梓", "周琳珊", "周承熠", "罗鑫睿", "朱万翔", "冷治霖", "陈思宇", "许浩轩", "满仁彬", "徐语彤", "周杨皓", "荀译萱", "陈卓", "黄鑫睿", "张嘉诺", "周澍雨", "李宗铃", "唐维骏", "叶一禅", "刘依依", "王舒悦", "邹义", "马梓轩", "易思彤", "覃朗", "徐子钦", "胡雨桐", "赵梓含", "杨书聿", "张珂鱼", "龙义远", "王翎西", "翟一航", "袁康愉", "张峻豪", "王心妍", "刘庆洋睿", "胡烔彰", "张有峰", "王妤菲"];
 
        //声明时间的变量
        var timer = null;
 
        //定义全局变量
        var index = null;
 
        //开始 随机的函数
        function gotoRand(){
            //获取button 元素
            var button = document.getElementById('btn');
 
            //判断 是开始还是结束
            if (timer === null) {
                //开启定时
                timer = setInterval(getName, 100);
                //把button的内容改掉
                button.innerHTML = "暂 停";
            } else {
                //清除定时
                clearInterval(timer);
                //修改button的内容
                button.innerHTML = "开 始";
                //把timer赋值为null
                timer = null;
 
                if (nameList.length > 0) {
                    //取出数据 放在constom里
                    document.getElementById('custom').innerHTML += nameList[index]+'<br>';
                    //把取过数据删掉
                    nameList.splice(index, 1);
                }
            }
 
            
        }
 
 
        //随机获取姓名函数
        function getName(){
            //判断
            if (nameList.length <= 0) {
                document.getElementById('content').innerHTML = "抽奖结束";
                return;
            }
 
            //取随机数
            index = Math.floor(Math.random() * 10000000 % nameList.length);
            //取出姓名放入 div中
            document.getElementById('content').innerHTML = nameList[index];
        }
 
 
    </script>
 
    
 
</body>
</html>